<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .hanger{
            width: 100%;
            margin: auto;
            display: flex;
            
        }
        .left{
            width: 13%;
            height: 730px;
            background-color: rgb(19, 48, 62);

        }
        .right{
            width: 87%;
            height: 730px;
            background-color: rgb(210, 210, 223);
           
        }
        li{
            list-style: none;
            height: 30px;
            color: #fff;
           margin:15px 0 0 15px;
            font-size: 13px;
        }
        li:hover{
            border-radius: 15px;
           
            background-color: blue;
        }
        .tou{
            width: 100%;
            height: 40px;
            display: flex;
        }
        .title{
            width: 100%;
            height: 80px;
            background-color: blanchedalmond;
            font-size: 30px;
            line-height: 80px;
            color: rgb(105, 121, 132);
        }
        .tou input{
            height: 25px;
            border-radius: 25px;
            width: 150px;
            padding-left: 20px;
            outline: none;
            border: 1px solid #ccc;
            margin: 7px 0 0 20px;
        }
        .tou div{
            width: 40px;
            height: 22px;
            line-height: 40px;
            margin:0 10px;
        }
        .biaoyi{
            width: 48%; 
            height:400px;
            background-color: #fff;
            float: left;
            margin: 20px 0 0 20px;
        }
        .biaoer{
            width: 48%; 
            height:400px;
          background-color: #fff;
           float: left;
           margin: 20px 0 0 20px;
        }
        
       .iconfont{
            font-size: 22px;
        }
      .jian{
       float: right;
       margin-right: 15px;
            
        }
    </style>
</head>
<body>
    <div class="hanger">
        <div class="left">
            <ul>
                <li>
                    <span class="iconfont icon-w_huapan">
                    </span>
                    AdminLTE 3</li>
                <li>
                    <span class="iconfont icon-quan"></span>
                    Alexander Pierce</li>
                <li>
                    <span class="iconfont icon-quan"></span>
                    Dashboard</li>
                <li>
                    <span class="iconfont icon-quan"></span>
                    Dashboard vl</li>
                <li>
                    <span class="iconfont icon-quan"></span>
                    Dashboard v2</li>
                <li>
                    <span class="iconfont icon-jiugongge
                    "></span>
                    Dashboard v3 <span class="jian"><</span></li>
                <li>
                    <span class="iconfont icon-a-bingzhuangtubaifenbitongji
                    "></span>
                    
                    Widgets<span class="jian"><</span></li>
                <li>
                    <span class="iconfont icon-shu1
                    "></span>
                    

                    Charts<span class="jian"><</span></li>
                <li>
                    <span class="iconfont icon-tianmaomendianziti

                    "></span>UI Elements<span class="jian"><</span></li>
                <li>
                    <span class="iconfont icon-rili

                    "></span>Forms<span class="jian"><</span></li>
                    <li></li>
                    <li>EXAMPLES<span class="jian"><</span></li>
                    <li>
                        <span class="iconfont icon-jiludanzilishijilu"></span>
                        Calendar<span class="jian"><</span></li>
                    <li>
                        <span class="iconfont icon-youjian"></span>
                        Mailbox<span class="jian"><</span></li>
                    <li>
                        <span class="iconfont icon-shu"></span>
                        Pages<span class="jian"><</span></li>
                    <li>
                        <span class="iconfont icon-jiahaozhankai"></span>
                        Extras<span class="jian"><</span></li>
            </ul>
        </div>
        <div class="right">
            <div class="tou">
                <div><span class="iconfont icon-gengduo
                    ">
                </span></div>
                <div>Home</div>
                <div>Contact</div>
                <input type="text" placeholder="Search">
            </div>
            <div class="title">
                Dashboard v3

            </div>
            <div class="biaoyi">

            </div>
            <div class="biaoer"></div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
    <script>
        //echats.js文件会对外暴露一个echats对象
        //1.创建并初始化一个echarts实例
        var con = document.querySelector('.biaoer');
        var e = echarts.init(con);
    
        //2.绘制图表
        e.setOption({
            title:{ //图表的标题
                text:'Sales  $18,230.00' ,
                left:'10',
                top:'10',
            },
            legend:{ //图例
                top:25,
                // right:10,
            },    
            xAxis:{ //x轴设置
                data:['JUN','JUL','AUG','SEP','OCT','NOV',' DEC']
            },
            yAxis:{ //y轴设置
                splitLine:{
                    show:false
                }
               
            },
            series:[ //数据系列
                {
                    color:"red",
                    name:'当日成绩',
                    barWidth:20, //柱子的宽度
                    showBackground:false,//显示背景色
                    backgroundStyle:{
                        
                        borderRadius:0, //背景圆角
                    },
                    itemStyle:{ 
                        
                        borderRadius:[0],//边框圆角 
                    },
                    type:'bar',//'line' , 'bar' , 'pie'
                    data:[1,2,3,2,3,2.5] 
                },
                {
                    name:'当日成绩',
                    barWidth:20, //柱子的宽度
                    showBackground:false,//显示背景色
                    backgroundStyle:{
                        
                        borderRadius:0, //背景圆角
                    },
                    itemStyle:{ 
                        
                        borderRadius:[0],//边框圆角 
                    },
                    type:'bar',//'line' , 'bar' , 'pie'
                    data:[1,1,2,3,2,2.5] 
                },
            ]
        });
        var cone = document.querySelector('.biaoyi');
        var e = echarts.init(cone);
        e.setOption({
            title:{ //图表的标题
                text:'Sales  $18,230.00' ,
                left:'10',
                top:'10',
            },
            legend:{ //图例
                top:25,
                // right:10,
            },    
              

            xAxis:{ //x轴设置
                data:[' 18th','20th','22th','24th','26th','28th','30th']
            },
            yAxis:{ //y轴设置
                splitLine:{
                    show:false
                }
               
            },
            series:[ //数据系列
                {
                    color:"red",
                    name:'当日成绩',
                    
                    showBackground:false,//显示背景色
                    smooth:true,
                    backgroundStyle:{
                        
                        borderRadius:0, //背景圆角
                    },
                    itemStyle:{ 
                        
                        borderRadius:[10],//边框圆角 
                    },
                    type:'line',//'line' , 'bar' , 'pie'
                    data:[100,120,170,160,190,160,180] 
                },
                {
                    name:'当日成绩',
                    
                    showBackground:false,//显示背景色
                    smooth:true,
                    backgroundStyle:{
                        
                        borderRadius:0, //背景圆角
                    },
                    itemStyle:{ 
                        
                        borderRadius:[10],//边框圆角 
                    },
                    type:'line',//'line' , 'bar' , 'pie'
                    data:[60,80,70,60,80,80,100] 
                },
            ]
        })
    </script>
</body>
</html>
































